<template>
  <div class="app-portal-body">
    <div class="app-portal-menucontent">
      <div class="app-form-group-label">通用分类</div>
      <app-cate
        mode="mini"
        :app-id="app && app.group_id"
        @select="handleSelectComp"
        style="width:100%;height:auto;min-height: auto;margin-bottom: 5px;"
      ></app-cate>
      <div>
        <div class="app-form-group-label">Libs</div>
        <div style="padding: 5px">
          <el-button
            v-for="lib in libs"
            :type="lib.comp_lib === compLib ? 'primary': ''" size="small"
            @click="handleSelectLib(lib)"
            style="margin: 5px 5px 0px 5px"
          >{{ lib.comp_lib }}</el-button>
        </div>
      </div>
      <div>
        <div class="app-form-group-label">Tags</div>
        <div style="padding: 5px">
          <el-button
            v-for="tag in tags"
            :type="tag.tag === compTag ? 'primary': ''"
            size="small"
            @click="handleSelectTag(tag)"
            style="margin: 5px 5px 0px 5px"
          >{{ tag.tag }}</el-button>
        </div>
      </div>
    </div>
<!--    <div class="app-portal-content">
      <div class="app-portal-cnt-bd">-->
        <comp-list
          :app-id="currentData && currentData.group_id"
          :lib="compLib"
          :tag="compTag"
          class="h-full mt-0 mb-0 mr-0"
        />
<!--      </div>
    </div>-->
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import _ from 'lodash';
import {api} from "@jzl/api";
import appCate from './modules/app-dcomp.vue';
import compList from '@/views/basic/comps/comp-list.vue';

const props = defineProps({
  app: Object
});

const currentData = ref(null);
const tags = ref([]);
const libs = ref([]);
const compLib = ref("");
const compTag = ref("");

const init = async () => {
  await getLibs();
  await loadTags();
};

const handleSelectComp = (data) => {
  let dt = data;
  currentData.value = dt;
};

const getLibs = async () => {
  const libsData = await api.comp.getCompLibs({
    app_id: _.get(currentData.value, "group_id")
  });
  libs.value = libsData;
};

const loadTags = async () => {
  const tagsData = await api.comp.getCompTags({
    app_id: _.get(currentData.value, "group_id"),
    comp_lib: compLib.value
  });
  tags.value = tagsData;
};

const handleSelectLib = (lib) => {
  const compLibValue = _.get(lib, "comp_lib") || "";
  compLib.value = compLibValue === compLib.value ? "" : compLibValue;
};

const handleSelectTag = (tag) => {
  compTag.value = _.get(tag, "tag") || "";
};

onMounted(() => {
  init();
});

watch(() => currentData.value?.group_id, async () => {
  await getLibs();
  compLib.value = "";
  compTag.value = "";
  await loadTags();
});

watch(compLib, async () => {
  compTag.value = "";
  await loadTags();
});
</script>
